<script setup>
import {ArrowDown, Expand, Fold, Location, OfficeBuilding} from "@element-plus/icons-vue";
import {nextTick, onMounted, provide, ref} from "vue";
import {doGet, doPost, doPut} from "../http/httpRequest.js";
import {clearToken, confirmMessage, showMessage} from "../util/utils.js";
import {useRoute, useRouter} from "vue-router";

//定义router对象，该对象中提供了一些路由方法供我们使用，比如router.push(), router.go()
let router = useRouter();
//定义route对象，该对象提供了一些路由属性/字段供我们使用，比如route.path;  route.params; 等等
let route = useRoute();

//左侧菜单的折叠和展示
let isCollapse = ref(false)
const showMenu = () => {
  isCollapse.value = !isCollapse.value;
}

//使用是vue生命周期中的mounted阶段
onMounted(() => {
  //查询当前登录的用户信息，然后在顶部导航中显示登录人名称
  getUserInfo();
  //动态计算路由路径，赋值给：默认激活哪个菜单
  computeRoutePath();
});

//定义登录用户信息对象，初始值是空
let loginUser = ref({});

//获取当前登录人的信息
const getUserInfo = () => {
  doGet('/api/userInfo', {}).then( (resp) => { //ajax的请求完成后，拿到了返回结果就会触发then()函数 （一般不省略）
    console.log(resp);
    if (resp.data.code === 200) {
      loginUser.value = resp.data.data.principal;
    }
  }).catch( (error) => { //ajax的请求，发生了异常或错误，触发catch()函数 （可以省略）
    console.log(error);
  }).finally( () => { //请求之后，不管是成功了，还是异常错误了，最终都会执行finally()函数 （可以省略）
    // 总是会执行
  });
}

//退出登录函数
const logout = () => {
  doPost('/api/logout', {}).then( (resp) => { //ajax的请求完成后，拿到了返回结果就会触发then()函数 （一般不省略）
    console.log(resp);
    if (resp.data.code === 200) {
      showMessage('退出成功', 'success')
      clearToken();
      //跳转到登录页
      router.push('/');
    } else {
      //强制退出
      confirmMessage('退出失败，是否强制退出？').then(() => { //点确定就触发then函数
        //强制退出，就是把前端的token清理一下
        clearToken();
        //跳转到登录页
        router.push('/');
      }).catch(() => { //点取消就触发catch函数
        showMessage('取消强制退出', 'warning')
      })
    }
  }).catch( (error) => { //ajax的请求，发生了异常或错误，触发catch()函数 （可以省略）
    console.log(error);
    showMessage('网络错误', 'error')
  })
}

//定义我的资料对话框蒙版弹层是否显示的变量，true就显示，false就不显示
let myDialogVisible = ref(false);

//定义用户信息对象，初始值是空
let userInfo = ref({
  createByDO : {},
  editByDO : {}
});

//查看我的资料
const myProfile = () => {
  myDialogVisible.value = true
  //需要查询出该用户的资料信息，那就需要根据用户id去后端查询
  let userId = loginUser.value.id;
  doGet('/api/user/' + userId, {}).then(resp => {
    if (resp.data.code === 200) {
      userInfo.value = resp.data.data;
      if (!resp.data.data.createByDO) {
        //避免后端没有查询到createByDO创建人，前端读name字段的时候报null的错误
        userInfo.value.createByDO = {}
      }
      if (!resp.data.data.editByDO) {
        //避免后端没有查询到editByDO编辑人，前端读name字段的时候报null的错误
        userInfo.value.editByDO = {}
      }
    }
  })
}

//定义用户密码对象，初始值是空
let userPwd = ref({})

//定义"修改密码"对话框蒙版弹层是否显示的变量，true就显示，false就不显示
let myPwdVisible = ref(false)

//修改密码
const updatePwd = () => {
  //每次点击修改密码，把输入框的内容清空一下
  userPwd.value = {};
  myPwdVisible.value = true;
}

//验证原始登录密码的函数
const validateLoginPwd = (rule, value, callback) => {
  //value参数是input框输入的值
  if (!value) {
    callback(new Error('请输入原始登录密码'))
  } else {
    //向后端发送请求，验证该原始登录密码是否正确
    doGet('/api/user/loginPwd', {
      userId : loginUser.value.id,
      loginPwd : value
    }).then(resp => {
      if (resp.data.code === 200) {
        callback() //正常，登录密码正确
      } else {
        callback(new Error('您输入的原始登录密码有误'));
      }
    })
  }
}

//验证两次输入的登录密码是否一致
const validateReLoginPwd = (rule, value, callback) => {
  if (value === userPwd.value.newLoginPwd) {
    callback() //正常，两次输入的登录密码一致
  } else {
    callback(new Error('您两次输入的登录密码不一致'));
  }
}

//定义userPwdRules的验证规则
let userPwdRules = {
  loginPwd : [
    { required: true, message: '请输入原始登录密码', trigger: 'blur' },
    { min: 6, max: 16, message: '原始登录密码长度为6-16位', trigger: 'blur' },
    //validator是写一个函数，通过validateLoginPwd()该函数来验证loginPwd是否正确
    { validator: validateLoginPwd, trigger: 'blur' }
  ],
  newLoginPwd : [
    { required: true, message: '请输入新的登录密码', trigger: 'blur' },
    { min: 6, max: 16, message: '新的登录密码长度为6-16位', trigger: 'blur' },
  ],
  reNewLoginPwd : [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 6, max: 16, message: '新的登录密码长度为6-16位', trigger: 'blur' },
    { validator: validateReLoginPwd, trigger: 'blur' }
  ]
}

//定义一下form的ref属性loginPwdFormRef
const loginPwdFormRef = ref()

const updateLoginPwdSubmit = (formEl) => {
  if (!formEl) { //如果formEl不存在，也就是你没有给login()函数传userFormRef参数，那么就return，不做验证了
    return
  }
  formEl.validate((valid) => {
    if (valid) { //valid是true表示验证通过，否则没通过
      //可以提交了
      doPut('/api/user/pass', {
        userId : loginUser.value.id,
        loginPwd : userPwd.value.loginPwd,
        newLoginPwd : userPwd.value.newLoginPwd,
        reNewLoginPwd : userPwd.value.reNewLoginPwd
      }).then(resp => {
        if (resp.data.code === 200) {
          //提示一下
          showMessage('密码修改成功', 'success')
          //弹层关闭
          myPwdVisible.value = false
        } else {
          //提示一下
          showMessage('密码修改失败', 'error')
        }
      })
    }
  })
}

//定义当前激活使用哪一个菜单，初始值是空
let activeRoutePath = ref('');

//动态计算当前正在访问的路由路径
const computeRoutePath = () => {
  let tempPath = route.path;   //  /dashboard/user/3  -->  /dashboard/user
  let tempArr = tempPath.split("/");  // /dashboard/user/3 --> [ , dashboard, user, 3 ]
                                               // /dashboard/user  --> [ , dashboard, user ]
  if (tempArr.length > 3) {
    activeRoutePath.value = "/" + tempArr[1] + "/" + tempArr[2];
  } else {
    activeRoutePath.value = tempPath;
  }
}

//定义右侧内容体是否显示，默认是true显示，false不显示
let isRouterAlive = ref(true);

//页面局部刷新的函数
const reload = () => {
  //把控制变量改成false，右侧内容体就隐藏了，隐藏会触发页面重写渲染
  isRouterAlive.value = false;
  nextTick( () => {
    //回调函数中把控制变量改成true，右侧内容体就显示了
    isRouterAlive.value = true;
  })
}

//向子页面提供/输出reload函数，那么其他子页面就可以使用该reload函数
provide("flush", reload);
provide("myData", "这是我的数据");

</script>

<template>
  <el-container>
    <!--左侧-->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="menuTitle">@动力云客管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          :default-active="activeRoutePath"
          text-color="#fff"
          :collapse="isCollapse"
          :collapse-transition="false"
          :unique-opened="true"
          :router="true"
          style="border-right: 0 solid var(--el-menu-border-color);">

        <el-sub-menu index="1">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>市场活动</span>
          </template>

          <el-menu-item index="/dashboard/activity">
            <el-icon><Location /></el-icon>
            <span>市场活动</span>
          </el-menu-item>

          <el-menu-item index="/dashboard/product">
            <el-icon><Location /></el-icon>
            <span>产品管理</span>
          </el-menu-item>

          <el-menu-item index="1-3">
            <el-icon><Location /></el-icon>
            <span>XXXXXX</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>线索管理</span>
          </template>

          <el-menu-item index="/dashboard/clue">
            <el-icon><Location /></el-icon>
            <span>线索管理</span>
          </el-menu-item>

          <el-menu-item index="2-2">
            <el-icon><Location /></el-icon>
            <span>XXXXXX</span>
          </el-menu-item>

          <el-menu-item index="2-3">
            <el-icon><Location /></el-icon>
            <span>XXXXXX</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>客户管理</span>
          </template>

          <el-menu-item index="/dashboard/customer">
            <el-icon><Location /></el-icon>
            <span>客户管理</span>
          </el-menu-item>

          <el-menu-item index="3-2">
            <el-icon><Location /></el-icon>
            <span>XXXXXX</span>
          </el-menu-item>

          <el-menu-item index="3-3">
            <el-icon><Location /></el-icon>
            <span>XXXXXX</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>交易管理</span>
          </template>

          <el-menu-item index="/dashboard/tran">
            <el-icon><Location /></el-icon>
            <span>交易管理</span>
          </el-menu-item>

          <el-menu-item index="4-2">
            <el-icon><Location /></el-icon>
            <span>XXXXXX</span>
          </el-menu-item>

          <el-menu-item index="4-3">
            <el-icon><Location /></el-icon>
            <span>XXXXXX</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>系统管理</span>
          </template>

          <el-menu-item index="/dashboard/user">
            <el-icon><Location /></el-icon>
            <span>用户管理</span>
          </el-menu-item>

          <el-menu-item index="5-2">
            <el-icon><Location /></el-icon>
            <span>角色管理</span>
          </el-menu-item>

          <el-menu-item index="5-3">
            <el-icon><Location /></el-icon>
            <span>系统管理</span>
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>

    <!--右侧-->
    <el-container id="rightSide">
      <!--右侧头部-->
      <el-header>
        <el-icon id="foldExpand" @click="showMenu">
          <Expand v-if="isCollapse"/>
          <Fold v-else/>
        </el-icon>
        <!--登录用户名的下拉菜单-->
        <el-dropdown>
        <span>
          {{loginUser.name}} <el-icon><arrow-down /></el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="myProfile">我的资料</el-dropdown-item>
              <el-dropdown-item @click="updatePwd">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!--右侧内容体-->
      <el-main>
        <!--1、拿到当前访问的路径-->
        <!--2、根据当前访问的路径，去路由配置中找到对应的页面-->
        <!--3、把路由所对应的页面在此处显示出来-->
        <router-view v-if="isRouterAlive"/>  <!-- /dashboard/user -->   <!-- /dashboard/user/8 -->
      </el-main>

      <!--右侧尾部-->
      <el-footer>
        @版权所有 动力节点 2009-2099 北京动力节点教育科技有限公司
      </el-footer>
    </el-container >
  </el-container>

  <!--我的资料对话框蒙版弹层-->
  <el-dialog v-model="myDialogVisible" title="我的资料" width="1000" center>
    <el-form
        :model="userInfo"
        label-width="auto">
      <el-form-item label="ID">
        <div class="divInfo">{{userInfo.id}}</div>
      </el-form-item>
      <el-form-item label="账号">
        <div class="divInfo">{{userInfo.loginAct}}</div>
      </el-form-item>
      <el-form-item label="密码">
        <div class="divInfo">******</div>
      </el-form-item>
      <el-form-item label="姓名">
        <div class="divInfo">{{userInfo.name}}</div>
      </el-form-item>
      <el-form-item label="手机">
        <div class="divInfo">{{userInfo.phone}}</div>
      </el-form-item>
      <el-form-item label="邮箱">
        <div class="divInfo">&nbsp;{{userInfo.email}}</div>
      </el-form-item>
      <el-form-item label="账号是否未过期">
        <div class="divInfo">{{userInfo.accountNoExpired === 1 ? '是' : '否'}}</div>
      </el-form-item>
      <el-form-item label="密码是否未过期">
        <div class="divInfo">{{userInfo.credentialsNoExpired === 1 ? '是' : '否'}}</div>
      </el-form-item>
      <el-form-item label="账号是否未锁定">
        <div class="divInfo">{{userInfo.accountNoLocked === 1 ? '是' : '否'}}</div>
      </el-form-item>
      <el-form-item label="账号是否已经开启">
        <div class="divInfo">{{userInfo.accountEnabled === 1 ? '是' : '否'}}</div>
      </el-form-item>
      <el-form-item label="创建时间">
        <div class="divInfo">{{userInfo.createTime}}</div>
      </el-form-item>
      <el-form-item label="创建人">
        <div class="divInfo">{{userInfo.createByDO.name}}</div>
      </el-form-item>
      <el-form-item label="编辑时间">
        <div class="divInfo">&nbsp;{{userInfo.editTime}}</div>
      </el-form-item>
      <el-form-item label="编辑人">
        <div class="divInfo">&nbsp;{{userInfo.editByDO.name}}</div>
      </el-form-item>
      <el-form-item label="最近登录时间">
        <div class="divInfo">&nbsp;{{userInfo.lastLoginTime}}</div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="myDialogVisible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>

  <!--修改密码对话框蒙版弹层-->
  <el-dialog v-model="myPwdVisible" title="修改密码" width="800" center>
    <el-form
        ref="loginPwdFormRef"
        :model="userPwd"
        :rules="userPwdRules"
        label-width="auto">
      <el-form-item label="原始密码" prop="loginPwd">
        <el-input type="password" v-model="userPwd.loginPwd"/>
      </el-form-item>
      <el-form-item label="修改密码" prop="newLoginPwd">
        <el-input type="password" v-model="userPwd.newLoginPwd"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="reNewLoginPwd">
        <el-input type="password" v-model="userPwd.reNewLoginPwd"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="myPwdVisible = false">关 闭</el-button>
        <el-button type="primary" @click="updateLoginPwdSubmit(loginPwdFormRef)">提 交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-aside {
  background: #1a1a1a;
}
.el-header {
  background: azure;
  height: 38px;
  line-height: 38px;
}
.el-footer {
  background: aliceblue;
  height: 38px;
  line-height: 38px;
  text-align: center;
}
.menuTitle {
  color: #f9f9f9;
  text-align: center;
  height: 38px;
  line-height: 38px;
}
#foldExpand {
  cursor : pointer;
}
.el-dropdown {
  float: right;
  line-height: 38px;
}
.divInfo {
  background: azure;
  width: 100%;
  margin-left: 10px;
  padding-left: 10px;
}
#rightSide {
  height: calc(100vh);
}
</style>